<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="./logo_72.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 预加载关键资源 -->
  <link rel="preload" href="/mapbox/gis/map-gl.css" as="style">
  <link rel="preload" href="/mapbox/gis/map-gl.js" as="script">
  <!-- 预加载iconfont -->
  <link rel="preload" href="/src/assets/iconfont/iconfont.css" as="style">

  <!-- 异步加载非关键资源 -->
  <link rel="stylesheet" href="/mapbox/gis/map-gl.css">
  <link rel="stylesheet" href="/mapbox/gis/mapbox-popup.css">
  <link rel="stylesheet" href="/src/assets/iconfont/iconfont.css">
  <script defer src="/mapbox/gis/map-gl.js"></script>

  <style>
    @font-face {
      font-family: "iconfont";
      src: url('/src/assets/iconfont/iconfont.woff2') format('woff2'),
        url('/src/assets/iconfont/iconfont.woff') format('woff'),
        url('/src/assets/iconfont/iconfont.ttf') format('truetype');
    }

    .iconfont {
      font-family: "iconfont" !important;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .icon-CLOUDY:before {
      content: "\e61e";
    }

    .icon-PARTLY_CLOUDY_DAY:before {
      content: "\e61b";
    }

    .icon-CLEAR_DAY:before {
      content: "\e61f";
    }

    .icon-FOG:before {
      content: "\e617";
    }

    #initial-loading {
      position: fixed;
      z-index: 10000;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #fff;
    }

    .initial-loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .initial-icon-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }

    .initial-loading-icon {
      font-size: 28px;
      color: #579af7;
      margin: 0 5px;
      opacity: 0.3;
      animation: initial-fadeInOut 1.5s ease-in-out infinite;
    }

    .initial-loading-icon:nth-child(1) {
      animation-delay: 0s;
    }

    .initial-loading-icon:nth-child(2) {
      animation-delay: 0.3s;
    }

    .initial-loading-icon:nth-child(3) {
      animation-delay: 0.5s;
    }

    .initial-loading-icon:nth-child(4) {
      animation-delay: 0.7s;
    }

    .initial-text {
      font-size: 14px;
      color: #95a5a6;
      text-align: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    @keyframes initial-fadeInOut {
      0%,
      100% {
        opacity: 0.3;
        transform: scale(0.8);
      }

      50% {
        opacity: 1;
        transform: scale(1);
      }
    }
  </style>
</head>

<body>
  <div id="initial-loading">
    <div class="initial-loading-content">
      <div class="initial-icon-container">
        <i class="iconfont icon-No_Data initial-loading-icon"></i>
        <i class="iconfont icon-CLOUDY initial-loading-icon"></i>
        <i class="iconfont icon-FOG initial-loading-icon"></i>
        <i class="iconfont icon-STORM_SNOW initial-loading-icon"></i>

      </div>
      <div class="initial-text">加载中...</div>
    </div>
  </div>

  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <script type="module" src="/src/assets/iconfont/iconfont.js"></script>

  <script>
    window.onload = function () {
      setTimeout(function () {
        var initialLoading = document.getElementById('initial-loading');
        if (initialLoading) {
          initialLoading.style.opacity = '0';
          initialLoading.style.transition = 'opacity 0.6s ease';
          setTimeout(function () {
            initialLoading && initialLoading.parentNode && initialLoading.parentNode.removeChild(
              initialLoading);
          }, 500);
        }
      }, 500);
    };
  </script>
</body>

</html>